<template>
    <div class="photo-grid-item-wrapper">
      <div class="photo-grid-item-content" @click="handleClick"></div>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'

@Component({})
export default class PhotoGridItem extends Vue {
  @Prop({ default: { regular: '', raw: '' }, type: Object })
  urls: {
    [key: string]: string
  }

  mounted() {
    const el = this.$el.firstElementChild
    el.style.backgroundImage = `url(${this.urls.regular})`
  }

  handleClick() {
    this.$store.commit('SET_CURRENT_PREVIEW_URL', this.urls.raw)
    this.$store.commit('SET_PREVIEWER_VISABLE', true)
  }
}
</script>

<style lang="scss" scoped>
.photo-grid-item-wrapper {
  width: 25%;
  height: 33.333333%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;

  .photo-grid-item-content {
    width: 100%;
    height: 100%;
    background: #000 no-repeat top center;
    background-size: cover;
    /*box-shadow: inset 0 0 100px 40px #00000010;*/

    &:hover {
      /*position: absolute;*/
      /*transform: scale(1.2);*/
      /*z-index: 999;*/
      /*transition: all 0.3s;*/
      cursor: pointer;
      /*box-shadow: 0 0 100px 10px #00000030;*/
    }

    &:after {
      content: '';
      display: block;
      padding-top: 125%;
    }
  }
}
</style>
